<html>
	<head>
		<script type = "text/javascript" src="js/Three.js"></script>
		<script type = "text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type = "text/javascript" src="js/jquery.uniform.min.js"></script>
		<script type = "text/javascript" src="js/voxel2D.js"></script>
		<link rel="stylesheet" href="css/uniform.default.css" type="text/css" media="screen" charset="utf-8" />
		<style type="text/css">
			#widget  table 
			{
				float: left;	
			}
			#widget  canvas
			{
				float: left;
			}
			#widget td
			{
				margin:0;
				padding:0;
			}
			#widget td:last-child
			{
				padding-right: 1px;
			}
			#widget td input
			{
				width: 4em;
				margin:0;
			}
			#widget table {
				border-spacing: 0;
				border-collapse:collapse;
			}
			#widget table td input::-webkit-outer-spin-button,
			#widget table td input::-webkit-inner-spin-button {
			    -webkit-appearance: none;
			    margin: 0;
			}
			#widget table td input::-webkit-outer-spin-button:focus,
			#widget table td input::-webkit-inner-spin-button:focus  {
				background: yellow;
			    -webkit-appearance: textfield;
			}
		</style>
		<script type = "text/javascript">$(document).ready(function () {
			renderer.init('#widget', new VoxelField(5, 5));
			});</script>
	</head>
	<body>

		
		<div id = "widget">
			<div id="controls">
				<label for="voxel">
				<input id="voxel" type="checkbox" checked="checked" />Mostrar Voxels</label>
				<label for="marching">
				<input id="marching" type="checkbox" checked="checked" />Mostrar Marching Squares</label>
				<label for="isovalue">Isovalue</label>
				<input id="isovalue" type="number" min="0" max="100" step="10" value="50" />
			</div>
			<table>
			</table>
			
		</div>
	</body>
</html>